<template>
  <div>
    <q-layout>
      <q-layout-header ref="header">
        <xheader :title="title" show-help @click-help="showHelp = !showHelp"></xheader>
      </q-layout-header>
      <q-page-container>
        <xscrollarea :scroll-height="scrollHeight">
          <q-page padding>

            <table>
              <thead>
              <tr>
                <th colspan="2">机台号</th>
                <th>状态</th>
                <th>报警</th>
                <th>时长</th>
              </tr>
              </thead>
              <tbody v-for="(key,item) in list">

              <tr v-for="(keyItem,i) in key">
                <td v-if="i===0" :rowspan="key.length">{{item}}</td>
                <td>{{keyItem['FCOD']}}</td>
                <td style="vertical-align: middle">
                  <img src="../../assets/dot_red.png" v-if="keyItem['RUN_STATUS'] !== 'RUNNING'">
                  <img src="../../assets/dot_green.png" v-if="keyItem['RUN_STATUS'] === 'RUNNING'">
                </td>
                <td>1</td>
                <td>{{keyItem['RUN_STATUS'] === 'RUNNING' ? keyItem['RUN_TIME'] : '-'}}</td>
              </tr>
              <!--<tr v-for="(key,item) in list">
                <td>{{item.FCOD}}</td>
                <td>{{item.RUN_STATUS}}</td>
                <td>{{item.RUN_TIME}}</td>
              </tr>-->
              </tbody>
            </table>
          </q-page>
        </xscrollarea>
      </q-page-container>
      <q-modal v-model="showHelp" position="bottom">
        <q-modal-layout>
          <q-toolbar slot="header" inverted>

            <q-toolbar-title>
              <div style="text-align: center;width: 100%">
                帮助
              </div>
            </q-toolbar-title>

          </q-toolbar>
          <div class="layout-padding">

            运行时长单位为(小时)<br>
            <img src="../../assets/dot_green.png">运行
            <img src="../../assets/dot_yellow.png">报警
            <img src="../../assets/dot_red.png">停机

          </div>
        </q-modal-layout>
      </q-modal>
    </q-layout>
  </div>
</template>

<script>
import Xheader from '../../components/xheader'
import Xscrollarea from '../../components/xscrollarea'

export default {
  name: 'equipmentprocess',
  components: { Xscrollarea, Xheader },
  props: {
    title: {}
  },
  data: () => ({
    list: [],
    length: 0,
    index: 0,
    showHelp: false,
    scrollHeight: 0
  }),
  computed: {},
  mounted () {
    this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight
  },
  methods: {
    getData () {
      this.axios.post(this.$conf.server + '/ekanban/equipmentRunState').then(res => {
        if (res.data.result) {
          this.list = res.data.list
          this.length = res.data.length
        }
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style scoped>
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }

  table td, table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }

  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #F5FAFA;
  }
</style>
